import React from 'react';

import './index.less';

interface Props {
  fields: {
    key: string;
    value: string;
    level: string;
    class: string;
  };
}

function Card(props: Props) {
  const { key, value, level, class: classes } = props.fields;
  return (
    <div className='magic-card'>
      <div className='magic-card-key'>{key}</div>
      <div className='magic-card-value'>{value}</div>
      <div className='magic-card-level'>{level}</div>
      <div className='magic-card-class'>{classes}</div>
    </div>
  );
};

export default Card;
